<template>
  <div class="home">
      <div class="home-wrapper">
        <div>
          <Swipper :item=swiper />
        </div>
        <div class="home-nav">
          <HomeNav  :items=navlist />
        </div>
        <div class="home-bargain-container" @click="toRegatearlist" >
            全民砍价 >
        </div>
        <!-- 首页砍价内容 -->
        <div @click="toRegatearlist"> 
          <Regatear v-for="(item,index) in regatearhomelist "
          :key="index"
          :item="item"
           />
        </div>
        <!-- 精选推荐 -->
        <div class="selected-topics-container">
          <div class="home-bargain-container">
            精选推荐 >
          </div>
          <div class="selected-topics-context-container">
            <div class="selected-topics-context-wrapper">
              <Selectedtopics v-for="(item,index)  in selectedlist"
              :key="index"
              :item="item"
              @selectedTtop="selectedTtop"
               />
            </div>
          </div>
        </div>

        <!-- 人气 -->
        <div>
          <div class="home-bargain-container" @click="tocalentura" >
            人气推荐专栏 >
          </div>
            <!-- 首页人气内容 -->
          <div class="sentiment-container"> 
            <Calentura v-for="(item,index) in sentiment "
            :key="index"
            :item="item"
            @todetalle="todetalle"
            />
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Swipper from '../components/homecommon/Swipper'
import HomeNav from '../components/homecommon/HomeNav'
import Regatear from '../components/homecommon/Regatearpag/Regatear'
import Calentura from '../components/homecommon/Regatearpag/Calentura'
import Selectedtopics from '../components/homecommon/Regatearpag/Selectedtopics'
import '../css/homeconmecss/home.css'
export default {

  components: {
    Swipper,
    HomeNav,
    Regatear,
    Calentura,
    Selectedtopics
  },
  data(){
    return{
      swiper:[
        {"icon":"https://cdn.it120.cc/apifactory/2018/11/06/1a6dc56d16dcec64639d9ea624ebdd46.jpg"},
        {"icon":"https://cdn.it120.cc/apifactory/2018/11/07/ad7e06f98e8910ff789b6e577b36c20b.jpg"},
        {"icon":"https://cdn.it120.cc/apifactory/2018/11/07/76d9a2c2bd56c4ac0497b5d360c6bc06.png"}
      ],
      navlist:[
        {
          "title":"签到",
          "icon":require('../assets/nav/love.png')
        },
        {
          "title":"礼券",
          "icon":require('../assets/nav/bao.png')
        },
        {
          "title":"砍价",
          "icon":require('../assets/nav/King.png')
        },
        {
          "title":"专栏",
          "icon":require('../assets/nav/light.png')
        }
      ],
    }
  },
  methods:{
    // 跳转到砍价列表
    toRegatearlist(){
        this.$router.push("Regatearlist")
    },
    // 跳转到人气推荐列表
    tocalentura(){
      this.$router.push("Calentura")
    },
    // todetalle(item){
      // window.console.log(item)
      //  this.$router.push({
      //     path:"/detalle",
      //       query:{
      //         item:item
      //       }
      //   })
    // },
    // 精品推荐详情
    selectedTtop(item){
      // console.log(item.id)
      this.$router.push({
        path:"/selecttop",
        query:{
          id:item.id
        }
      })
    },


    // 商品详情
    todetalle(item){
      // window.console.log(item)
      this.$router.push({
        name:"Detalle",
        params:{
          id:item.id
        }
      })
    }
  },
  mounted(){
    // 主页砍价内容
    this.$store.dispatch("regatear");
    // 主页人气内容
    this.$store.dispatch("sentiment");
    // 精选推荐内容
    this.$store.dispatch("Selectedlist");
  },
  computed:{
    regatearhomelist:function(){
      return this.$store.state.Listmodules.regatear
    },
    sentiment:function(){
      return this.$store.state.Listmodules.sentimentlist
    },
    selectedlist:function(){
      return this.$store.state.Listmodules.selectedlist
    }
  }
}
</script>
